<template>
  <div class="energy-card">
    <div class="card-item">
      <StatusCard :current="current" :best-machine="bestMachine" />
    </div>
    <div class="card-item">
      <vechart v-if="bovOptions" :options="bovOptions" />
    </div>
    <div class="card-item">
      <vechart v-if="rateOptions" :options="rateOptions" />
    </div>
    <div class="card-item">
      <vechart v-if="loadOptions" :options="loadOptions" @seriesClick="popup" />
    </div>
  </div>
</template>

<script>
Object.assign(Date.prototype, {
  switch(time) {
    const date = {
      yy: this.getFullYear(),
      MM: this.getMonth() + 1,
      dd: this.getDate(),
      hh: this.getHours(),
      mm: this.getMinutes(),
      ss: this.getSeconds(),
    };
    if (/(y+)/i.test(time)) {
      time = time.replace(
        RegExp.$1,
        (this.getFullYear() + "").substr(4 - RegExp.$1.length)
      );
    }
    Object.keys(date).forEach(function (i) {
      if (new RegExp("(" + i + ")").test(time)) {
        if (RegExp.$1.length === 2) {
          date[i] < 10 ? (date[i] = "0" + date[i]) : date[i];
        }
        time = time.replace(RegExp.$1, date[i]);
      }
    });
    return time;
  },
});
import { mapState } from "vuex";
import scatterOptions from "../json/scatterOptions.json";
import scatterOptions2 from "../json/scatterOptions2.json";
import lineOptions from "../json/lineOptions.json";
export default {
  components: {
    StatusCard: () => import("./StatusCard.vue"),
    vechart: () => import("@components/charts/Vechart.vue"),
  },
  props: {
    currentData: {
      type: Object,
      default: () => {},
    },
    weekTime: {
      type: Object,
      default: () => {},
    },
    bovData: {
      type: Object,
      default: () => {},
    },
    convertRateData: {
      type: Object,
      default: () => {},
    },
    loadRateData: {
      type: Object,
      default: () => {},
    },
    bestMachine: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      scatterOptions: scatterOptions,
      scatterOptions2: scatterOptions2,
      lineOptions: lineOptions,
    };
  },
  computed: {
    ...mapState({
      service: (state) => state.service,
      webModel: (state) => state.authentication.webModel,
      treeTemplate: (state) => state.component.treeTemplate,
    }),
    loadDot() {
      if (
        this.convertRateData &&
        this.convertRateData.load_rate &&
        this.convertRateData.convert_rate
      ) {
        return {
          load: this.convertRateData.load_rate[
            this.convertRateData.load_rate.length - 1
          ],
          convert: this.convertRateData.convert_rate[
            this.convertRateData.convert_rate.length - 1
          ],
        };
      } else {
        return { load: 0, convert: 0 };
      }
    },
    current() {
      let weekTime;
      if (this.weekTime && (this.weekTime.value || this.weekTime.value === 0)) {
        if (this.weekTime.value > 0) {
          weekTime = this.weekTime.value.toFixed(1) + "h";
        } else {
          weekTime = "0h";
        }
      } else {
        weekTime = "-";
      }
      let totalTime, name, status;
      if (this.currentData && this.currentData.value) {
        const e = this.currentData.value.find((i) => i.tag_id === "bt");
        if (e && e.value) {
          if (e.value > 0) {
            totalTime = e.value.toFixed(1) + "h";
          } else {
            totalTime = "0h";
          }
        } else {
          totalTime = "-";
        }
        name = this.currentData.machine_name
          ? this.currentData.machine_name
          : "";
        status = this.currentData.value.find((i) => i.tag_id === "s").value;
      } else {
        totalTime = "-";
        name = "-";
        status = 0;
      }
      return {
        name: name,
        status: status,
        weekTime: weekTime,
        totalTime: totalTime,
      };
    },
    bovOptions() {
      const bovData = this.bovData;
      // console.log(this.bovData,'222222222222222')
      if (bovData && bovData.format_time) {
        const arr = [];
        bovData.format_time.forEach((item, index) => {
          const i = [bovData.format_time[index], bovData.value[index]];
          arr.push(i);
        });
        const formatter = function (value, index) {
          return new Date(Date.parse(value)).switch("MM月dd日");
        };
        return {
          ...this.scatterOptions,
          xAxis: {
            ...this.scatterOptions.xAxis,
            axisLabel: {
              ...this.scatterOptions.xAxis.axisLabel,
              formatter: formatter,
            },
          },
          series: [{ ...this.scatterOptions.series[0], data: arr }],
        };
      } else {
        return this.scatterOptions;
      }
    },
    rateOptions() {
      const rateData = this.convertRateData;
      if (rateData) {
        const arr = [];
        rateData.time.forEach((item, index) => {
          const i = [rateData.format_time[index], rateData.convert_rate[index]];
          arr.push(i);
        });
        const formatter = function (value, index) {
          return new Date(Date.parse(value)).switch("MM月dd日");
        };
        const min = function (value) {
          return Math.min(Math.floor(value.min), 8);
        };
        const max = function (value) {
          return Math.max(Math.ceil(value.max), 9);
        };
        return {
          ...this.scatterOptions2,
          xAxis: {
            ...this.scatterOptions2.xAxis,
            axisLabel: {
              ...this.scatterOptions2.xAxis.axisLabel,
              formatter: formatter,
            },
          },
          yAxis: { ...this.scatterOptions2.yAxis, min: min, max: max },
          series: [{ ...this.scatterOptions2.series[0], data: arr }],
        };
      } else {
        const min = function (value) {
          return Math.min(Math.floor(value.min), 8);
        };
        const max = function (value) {
          return Math.max(Math.ceil(value.max), 9);
        };
        return {
          ...this.scatterOptions2,
          yAxis: { ...this.scatterOptions2.yAxis, min: min, max: max },
        };
      }
    },

    loadOptions() {
      const loadrateData = this.loadRateData;

      if (loadrateData && this.loadDot) {
        // return this.lineOptions;
        const arr = [];
        loadrateData.load_rate.forEach((item, index) => {
          const i = [
            loadrateData.load_rate[index],
            loadrateData.value[index].toFixed(2),
          ];
          arr.push(i);
        });
        const arr1 = [[this.loadDot.load, this.loadDot.convert]];
        // console.log(arr1, "1111111111", arr);
        return {
          ...this.lineOptions,
          series: [
            { ...this.lineOptions.series[0], data: arr },
            { ...this.lineOptions.series[1], data: arr1 },
          ],
        };
      } else {
        return this.lineOptions;
      }
    },
  },

  methods: {
    async popup(data) {
      console.log("1111111", data);
      const result = await this.service.getCDACovertInfo({
        id: this.currentData.id || this.computedData.id,
        load: this.loadDot.load,
      });
      if (!result || !result.data) {
        this.$notify({
          title: "转化率数据列表获取失败",
          type: "error",
          duration: 2500,
        });
        return;
      }
      const payload = {
        data: result.data,
        dataTag:
          "负载率：" + Math.min(parseFloat(this.loadDot.load), 100) + "%",
      };
      this.$emit("popup", payload);
    },
  },
};
</script>

<style>
.energy-card {
  width: 100%;
  min-height: 18rem;
  display: flex;
  justify-content: space-between;
  flex: 1;
  margin-bottom: 1rem;
  max-height: 20rem;
}
.card-item {
  flex: 1;
}
</style>
